<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1， minimum-scale=1, width=device-width, user-scalable=no">
    <script src="../ExternalJs/jquery-2.2.4.min.js"></script>
    <script src="../js/conmon1.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        p{
            margin-bottom:8px;
            font-size: 15px;
            padding:0px 2.67%;
            box-sizing: border-box;
            line-height: 20px;
            margin-top:12px;
            text-indent: 2rem;
            box-sizing: border-box;
        }
        img{
            width:100%;
            box-sizing: border-box;
            display:flex;
        }
        #mainPart{
            position: absolute;
            top: 0px;
            bottom: 49px;
            width:100%;
            overflow-y: scroll;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }
        .show{
            padding: 12px 2.67%;
            width:100%;
            box-sizing: border-box;
        }
        h1{
            margin-top: 20px;
            font-size: 1.2rem;
            padding:0px 2.67%;
            margin-bottom: 0;
            color:#333333;
            box-sizing: border-box;
        }
        #comment{
            width:100%;
            height:49px;
            position: fixed;
            bottom:0;
            left:0;
            display:none;
            box-sizing: border-box;
            padding:10px 2.67%;
            background-color: #FFFFFF;
            border-top:1px solid #e6e6e6;
        }
        #comment input{
            width:81%;
            height:28px;
            border:none;
            background-color: #F5F5F5;
            border-radius:10px ;
            padding-left:5%;
            box-sizing: border-box;
            outline:none;
            float: left;
        }
        #comment span{
            margin-left: 3%;
            color:#46a3db;
        }
        #comment img{
            margin-top: 3px;;
            width:6%;
            float: left;
            margin-left:3%;
        }
        #comment img:nth-child(2){
            padding-top:2px;
        }
    </style>
</head>
<body>
<div id="mainPart">
    <div class="show">
        <h1></h1>
    </div>
</div>
<section id="comment">
    <form onsubmit="return false"><input type="text" id="commentContent" name="comment" placeholder="随便说两句" disabled></form>
    <img id="commit" src="../images/commit.png"><img src="../images/head-star_icon.png" id="collect">
</section>
<script>

    //提交评论部分
    $(document).ready(function(){
        //获取头条id
        var headline_id;
        var headline_id1 = getQueryString("headline_id");
        if(headline_id1 == null){
            headline_id = sessionStorage.headline_id;
        }else{
            headline_id = headline_id1;
        }
        console.log(headline_id1,sessionStorage.headline_id);
        postArray.headline_id = headline_id;
        //获取头条html数据
        $.post(commonval+"/headline_info",postArray,function(data){
            if(data.status == 1){
                $("h1").append(data.data.title);
                $(".show").append(data.data.content);
                $('#comment').css("display","block");
            }
        });
        //是否收藏头条
        var is_collect;
        $.post(commonval+"/if_collect",postArray,function(data){
            if(data.status == 1){
                is_collect = data.data.is_collect;
                if(is_collect == 1){
                    $("#collect").attr('src','../images/head-star_icon_l.png')
                }else{
                    $("#collect").attr('src','../images/head-star_icon.png')
                }
            }
        })
        //判断是否登录
        $("#collect").click(function(e){
            is_collect++;
            if(is_collect%2==0){
                $(this).attr('src','../images/head-star_icon.png')
            }else{
                $(this).attr('src','../images/head-star_icon_l.png')
            }
            $.post(commonval+"/headline_collect",postArray,function(data){
                if(data.status == 1){
                    alert(data.msg);
                }
            })
            e.stopPropagation();
        })
        $("#comment").click(function(){
            if(sessionStorage.u_id===undefined){
                location.href="register.html?jump=8";
                $("#collect").unbind('click');
            }else{
                $("#commentContent").removeAttr('disabled');
                $("#commit").click(function(){
                    location.href = 'comment.html';
                });
            }
        })
        $(document).keypress(function(e) {
            // 回车键事件
            if(e.which == 13) {

                var value = $("#commentContent").val();
                if(value.length<20||value.length>400){
                    alert("评论内容必须在20~200个汉字之间！");
                }else{
                    console.log(value);
                    postArray.content = value;
                    postArray.u_id = sessionStorage.u_id;
                    postArray.headline_id = headline_id;
                    $.post(commonval+"/headline_comment_add",postArray,function(data){
                        if(data.status == 1){
                            alert(data.msg);
                        }
                    })
                }
            }
            e.stopPropagation();
        });


    });
</script>
</body>
</html>